<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <div class="UserImg">
          <el-avatar
            :src="msg.avatar"
           ></el-avatar>
        </div>
          
      
         <span  class="UserName">{{msg.username}}</span>
        

        <div class="view"><i class="el-icon-chat-dot-round"></i>{{msg.countComment}}</div>
        <div class="view"><i class="el-icon-view"></i>{{msg.countView}}</div>
      </div>


      <el-collapse v-model="activeNames" >
        <el-collapse-item :title="msg.title" name="1">
          <div  @click="goDetail(msg.id)">
          <div  >
            {{msg.content.substring(0,80)}}
          </div>
          <div>
            {{msg.content.substring(81,161)}}
          </div>
        </div>
          <div class="view" v-for="item in msg.tags" :key="item.id"><el-tag>{{item.tagName}}</el-tag></div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
export default {
  props:['msg'],
  data() {
    return {
      activeNames: ["1"],
    };
  },
  mounted () {
    
  },
  methods: {
    goDetail(id) {
  
      this.$router.push({
        name:'article',
        query:{'id':id}
      });
    }
  }
};
</script>

<style scoped lang="less">
.clearfix{
  margin-bottom: 15px;
}
.UserImg{
  height: 22px;
  /* margin-bottom: 10px; */
}

/deep/.el-collapse-item__header.is-active{
  font-weight: bold;
  font-size: 20px;
}
.UserName {
 
  margin-left: 50px;
  font-weight: bold;
  /* line-height: 30px; */
   /* margin-bottom: 20px; */
 
 
}
.text {
  font-size: 14px;
}

.item {
  padding: 10px;
}

.box-card {
  /* width: 800px; */

  line-height: 0;
  /* margin-left: 0px; */
}
.view {
  float: right;
  padding-left: 10px;
  color: #909399;
}
</style>